<template>
    <view class="uni-tab-bar">
        <scroll-view class="uni-swiper-tab" scroll-y="true" >
            <block v-for="(tab,index) in tabBars" :key="tab.id" :style="scrollStyle">
                <view 
                    class="swiper-tab-list" 
                    :class="{'active' : tabIndex==index}"
                    @tap="tabtap(index)"
                    :style="scrollItemStyle"
                >
                    {{tab.name}} {{tab.num?tab.num:""}}
                <view class="swiper-tab-line"></view>
                </view>
            </block>
        </scroll-view>
    </view>
</template>
<script>
    export default {
        props:{
            tabBars:Array,
            tabIndex:Number,
            scrollStyle:{
                type:String,
                default:""
            },
            scrollItemStyle:{
                type:String,
                default:""
            }
        },
        methods:{
            //点击切换导航
            tabtap(index){
                // this.tabIndex = index;
                this.$emit('tabtap',index)
            }
        }
    }
</script>
<style scoped >
.uni-swiper-tab{
        border-bottom: 1upx solid #EEEEEE;
	
    }
    .swiper-tab-list{
		text-align: center;
        color: #626262;
        font-weight: 500;
		font-size: medium;
		 /* background-color: #007AFF; */
		width: 25%;
		float: left;
		margin: 10rpx 0rpx;
		height: 60rpx;
		padding-top: 10rpx;
		
	
    }
    .uni-tab-bar .active{
        color: #343434;
	
    }
    .active .swiper-tab-line{
        border-bottom: 6upx solid #3093bd;
        width: 85px;
	   float: left;
        margin: 10rpx 10rpx;
        border-top: 3rpx solid #52aeff;
        border-radius: 20upx;
		
    }
</style>
